<template>
  <el-dialog
    :title="isEdit ? '编辑数据库信息' : '添加数据库信息'"
    :visible.sync="dialogVisible"
    width="30%"
    @close="handleClose"
  >
    <el-form ref="formRef" :model="form" label-width="100px">
      <el-form-item label="别名" prop="alias_name" :rules="[{ required: true, message: '请输入别名', trigger: 'blur' }]">
        <el-input v-model="form.alias_name" :disabled="isEdit"></el-input>
      </el-form-item>
      <el-form-item label="主机地址" prop="ip" :rules="[{ required: true, message: '请输入主机地址', trigger: 'blur' }]">
        <el-input v-model="form.ip" :disabled="isEdit"></el-input>
      </el-form-item>
      <el-form-item label="端口" prop="port" :rules="[{ required: true, message: '请输入端口', trigger: 'blur' }]">
        <el-input v-model="form.port"></el-input>
      </el-form-item>
      <el-form-item label="用户名" prop="user" :rules="[{ required: true, message: '请输入用户名', trigger: 'blur' }]">
        <el-input v-model="form.user"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="form.password" type="password"></el-input>
      </el-form-item>
      <el-form-item label="数据库类型" prop="db_type" :rules="[{ required: true, message: '请选择数据库类型', trigger: 'change' }]">
        <el-select v-model="form.db_type" placeholder="请选择数据库类型">
          <el-option label="MySQL" value="mysql"></el-option>
          <el-option label="PostgreSQL" value="postgresql"></el-option>
          <el-option label="Oracle" value="oracle"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="数据库名称" prop="db_name" :rules="[{ required: true, message: '请输入数据库名称', trigger: 'blur' }]">
        <el-input v-model="form.db_name"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="handleSubmit">确定</el-button>
    </template>
  </el-dialog>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      dialogVisible: false,
      isEdit: false,
      form: {
        host: '',
        port: '',
        username: '',
        password: '',
        db_type: '',
        db_name: ''
      }
    }
  },
  methods: {
    openDialog(data = null) {
      if (data) {
        this.isEdit = true
        this.form = { ...data }
      } else {
        this.isEdit = false
        this.form = {
          host: '',
          port: '',
          username: '',
          password: '',
          db_type: '',
          db_name: ''
        }
      }
      this.dialogVisible = true
    },
    handleClose() {
      this.$refs.formRef.resetFields()
      this.dialogVisible = false
    },
    handleSubmit() {
      this.$refs.formRef.validate(valid => {
        if (valid) {
          const url = this.isEdit ? '/pidscloud/db/update' : '/pidscloud/db/add'
          const method = this.isEdit ? 'put' : 'post'
          
          axios[method](url, this.form)
            .then(() => {
              this.$message.success(this.isEdit ? '更新成功' : '添加成功')
              this.$emit('refresh')
              this.dialogVisible = false
            })
            .catch(error => {
              console.error(this.isEdit ? '更新失败' : '添加失败', error)
              this.$message.error(this.isEdit ? '更新失败' : '添加失败')
            })
        } else {
          console.log('表单验证失败')
          return false
        }
      })
    }
  }
}
</script>

<style scoped>
.el-form-item {
  margin-bottom: 20px;
}
</style> 